import React, { Component } from 'react';
import { Input, Icon, Modal, Button, message } from 'antd';
import { searchCarInformation } from "../assets/js/api.js";


import "../assets/css/carManage.css"
const Search = Input.Search;
class CarManagement extends Component {
    constructor(prop) {
        super(prop);
        this.state = {
            list: [
            ],
            showList: [],
            isShow: false,
        }
    };
    showLinces = (item) => {
        if (item.drivingLicenseImgPathList.length > 0) {
            this.setState({
                isShow: true,
                showList: item.drivingLicenseImgPathList
            })
        }
    }
    closeModel = () => {
        this.setState({
            isShow: false,
            showList: [],
        })
    }
    getCarInformation = (value) => {
        if (value == '') {
            message.error("请输入有效的账户信息");
            return
        }
        let reg = /^([1-9]\d{1,14}|\d)$/
        if (!reg.test(value * 1)) {
            message.error("请输入有效的账户信息");
            return
        }
        searchCarInformation([value]).then((res) => {
            let data = res.data;
            console.log(data);
            if (data.ifsuccess && data.code == 200) {
                this.setState({
                    list: data.result
                })
            }
            if (data.ifsuccess && !data.code == 200) {
                message.warning(data.msg);
            }
            if (!data.ifsuccess) {
                message.error("网络延时,请稍后重试");
            }
            if (data.code == 10300) {
                message.error("登陆已失效");
                // window.location.href = loginPath;
            }

        })


    }
    render() {
        return (
            <div id="carManagement">
                <div id="carContainer">
                    <p id="carTitle">车辆信息管理</p>
                    <div id="carInfo">
                        <div id="carMsg">
                            <span>展示已上传的账号信息,可删除</span>
                        </div>
                        <div id="searchCar">
                            <Search
                                placeholder="搜索账号信息"
                                onSearch={(value) => this.getCarInformation(value)}
                                enterButton
                            />
                        </div>
                    </div>


                    <div className={"carInfoContainer"}>
                        {this.state.list.map((item, index) => {
                            return (
                                <div key={index} className={"carItem"} onClick={() => { this.showLinces(item) }}>
                                    <img className={"userIcorm"} src={item.userHeadPortrait || require('../assets/img/custer.png')} />
                                    <div className={"userInfo"}>
                                        <div className={"userPhone"}>{item.phone}</div>
                                        <div>
                                            {item.drivingLicenseImgPathList.length == 0 ?
                                                <span>
                                                    <Icon type="close-circle-o" />&nbsp;
                                                    未认证
                                                </span> :
                                                <span>
                                                    <Icon type="check-circle-o" />&nbsp;
                                                    已认证
                                                    &nbsp;&nbsp;
                                                    <Icon type="idcard" />&nbsp;
                                                    查看证件
                                                </span>
                                            }
                                        </div>
                                    </div>
                                </div>
                            )
                        })}
                    </div>



                    <Modal title="已认证的证件"
                        width={"800px"}
                        visible={this.state.isShow}
                        onCancel={this.closeModel}
                        footer={
                            <div className="deleteBtn">
                                <Button key="back" onClick={this.closeModel}>
                                    取消
                                </Button>
                                <Button key="submit" onClick={this.closeModel} type="primary">
                                    确定
                               </Button>
                            </div>
                        }
                    >
                        <div className="licenceContainer">
                            {this.state.showList.map((item, index) => {
                                return (
                                    <div key={index} className="linceItem">
                                        <p>
                                            行驶证{index + 1}:
                                        </p>
                                        <img className={"linceImg"} src={item} alt={"行驶证" + (index + 1)} />
                                    </div>
                                )
                            })}
                        </div>
                    </Modal>
                </div>
            </div>
        )
    }

}


export default CarManagement;